<template>
<div>
  <table width='500px'
           border='1'>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <!-- 你想遍历生成什么结构，就在这个结构上添加v-for -->
        <tr v-for="(value,index) in list" :key="value.id">
          <td>{{index+1}}</td>
          <td>{{value.name}}</td>
          <td>{{value.age}}</td>
          <td>{{value.gender}}</td>
        </tr>
      </tbody>
    </table>
</div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "jack", age: 20, gender: "男" },
        { id: 2, name: "jack2", age: 22, gender: "男" },
        { id: 3, name: "jack5", age: 33, gender: "男" },
        { id: 4, name: "jack3", age: 44, gender: "男" },
        { id: 5, name: "jack4", age: 5, gender: "男" },
      ],
    };
  },
};
</script>

<style>
</style>